<template>
  <div>
    <h3>首页</h3>
    <button @click="tiaozhuan">跳转到流浪地球</button>&nbsp;
    <button @click="tiaozhuan2">查看蔡徐坤</button>&nbsp;
    <button @click="$router.go(-1)">后退</button>
  </div>
</template>

<script>
export default {
  methods: {
    tiaozhuan () {
      // 语法一：参数写对象；使用规则中的path地址，进行跳转
      // this.$router.push({
      //   path: 'movie',
      //   params: { // 【【【【如果用path，则params参数不能拼接，有问题，不能用】】】
      //     id: 3,
      //     name: '流浪地球'
      //   }
      // })
      // 语法二：参数写对象；使用规则中的name进行跳转
      this.$router.push({
        name: 'movie',
        // 路径参数
        params: {
          id: 3,
          name: '流浪地球'
        }
      })
      // 语法三：参数写字符串
      // this.$router.push('/about/you')
    },
    tiaozhuan2 () {
      this.$router.push({
        name: 'music',
        // 查询参数
        query: {
          id: 2,
          name: '蔡徐坤'
        }
      })
    }
  }
}
</script>

<style scoped>
div {
  min-height: 180px;
  background-color: sandybrown;
}
</style>
